<template>
    <div ref="recharge"> 
        <m-header :msg="'充值'"></m-header>
        <!-- 充值金额区域 -->
        <div>
            <div class="amount-box bg-c-wh">
                <div class="flex-box flex-pj bor-b-g padd-b">
                    <div>充值金额</div>
                    <div class="tx-c-666">
                        <input v-model="inText" class="input" type="number" @focus="checkAmount('4')" placeholder="输入金额"/>元
                    </div>
                </div> 
                <div class="flex-box flex-pj">
                    <div class="amount-but" v-for="(item, i) in [500, 1000, 2000, 5000]" :key="item"
                        :class="{
                        'amount-check' : amount == i,
                        'amount-uncheck' : amount != i
                    }" @click="checkAmount(i)">{{ item }}</div>
                </div> 
            </div>
            <!-- 充值金额区域结束 -->
            <!-- 充值类型 -->
            <div class="recharge-type">
                <div>
                    <div class="typu-line">线上充值</div>
                    <div class="flex-box flex-ac bor-b-g type-padd" v-for="(item, i) in xsList" @click="selectType(item, 'xs')" :key="i">
                        <div class="icon-type" :style="{backgroundImage: 'url(' + item.logurl + ')'}"></div>
                        <div class="">{{ item.title }}</div>
                        <div class="flex-box flex-f1 flex-pe">
                            <div class="icon-check" 
                                :class="{
                                'check' : type == item.id,
                                'uncheck' : type != item.id
                            }"></div>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="typu-line">线下充值</div>
                    <div class="flex-box flex-ac bor-b-g type-padd" v-for="(item, i) in xxList" @click="selectType(item, 'xx')" :key="i">
                        <div class="icon-type" :style="{backgroundImage: 'url(' + item.logurl + ')'}"></div>
                        <div class="">{{ item.title }}</div>
                        <div class="flex-box flex-f1 flex-pe">
                            <div class="icon-check" 
                                :class="{
                                'check' : type == item.id,
                                'uncheck' : type != item.id
                            }"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 充值按钮 -->
            <div class="recharge-box">
                <div class="white-space"></div>
                <div class="flex-bap">
                    <div class="recharge-btn" @click="rechargeSub">立即充值</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import MHeader from '../../components/m-header'
import { getRechargeType, sendPay } from '../../common/js/axiosUtil' 
import { isDefine, isEmptyObject, getClass } from '../../common/js/common'
export default {
    data() {
        return {
            inText : '',
            amount : '',
            type : '',
            kind : '',
            xsList : [],
            xxList : []
        }
    },
    created() {
        this.checkType()
    },
    methods: {
        checkAmount (amount) {
            this.amount = amount
            if(amount != 4){
                this.inText = ''
            }
        },
        selectType (item, kind) {
            this.type = item.id
            this.kind = kind
        },
        checkType () {
            this.$toast('加载中...', 1000000)
            let params = this.$params(1)
            getRechargeType(params)
            .then((response) => {
                this.$toastClose()
                if(response.data.code == '200'){
                    const {data} = response.data
                    this.type = data.xs[0].id
                    this.kind = 'xs'
                    this.xsList = data.xs
                    this.xxList = data.xx
                }else{ 
                    this.$logAgain(response.data.msg)
                }
            })
            .catch((error) => {
                this.$toast('请求服务失败', 2000)
            })
        },
        rechargeSub () {
            let check = getClass("amount-check")
            let amount = this.inText
            if(this.kind == 'xs'){
                if(!isEmptyObject(check) || isDefine(amount)){
                    let depositMoney = amount || check[0].innerHTML
                    this.toXsSubmit(depositMoney)
                } else {
                    this.$alert("请选择或输入充值金额")
                }
            }else{
                this.toXxSubmit()
            } 
        },
        toXsSubmit (depositMoney) {
            this.$toast('加载中...', 1000000)
            let params = this.$params(1)
            params.append('id', this.type)
            params.append('type', '1')
            params.append('depositMoney', depositMoney)
            sendPay(params)
            .then((response) => {
                this.$toastClose()
                if(response.data.code == '200'){
                    const {data} = response.data
                    let htmlName = ''
                    if(this.type == '12'){
                        htmlName = '杉德网银支付'
                    }else if(this.type == '13'){
                        htmlName = '杉德在线支付'
                    }else{
                        htmlName = '智惠支付'
                    }
                    if(isDefine(data.text)){
                        this.$router.push({
                            path : '/rechargeHtml',
                            query : {
                                htmlMsg : data.text,
                                htmlName : htmlName
                            }
                        })
                    }else{
                        this.$toast("请求超时", 2500)
                    }
                }else{
                        this.$toast(response.data.msg, 2000)
                }
            })
            .catch((error) => {
                this.$toast('请求服务失败', 2000)
            })
        },
        toXxSubmit () {
            let checkTypeName = ''
            if(this.type == '4'){
                checkTypeName = '支付宝'
            }else if(this.type == '5'){
                checkTypeName = '微信'
            }else{
                checkTypeName = '银行卡'
            }
            this.$router.push({
                path : '/rechargeOrder',
                query : {
                    checkTypeId : this.type,
                    checkTypeName : checkTypeName
                }
            })
        }
    },
    components: { 
        MHeader
    }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus"> 
@import "~common/stylus/variable"
    .amount-box
        height : 5rem
        margin : 0 5%
        padding-top : 1rem
    .padd-b
        font-size : $fonts-14
        padding-bottom : .75rem
        .input
            width : 4rem
            outline : none
    .amount-but
        flex : 1
        height : 1.75rem
        line-height : 1.75rem
        text-align : center
        margin : .75rem .25rem
        background-size: 100% 100%
    .amount-check
        background-image: url('../../common/image/check.png')
    .amount-uncheck
            background-image: url('../../common/image/check1.png')
    .recharge-type
        position : fixed
        left : 0
        top : 8.75rem
        bottom : 4.5rem
        width : 100%
        background : white
        overflow: auto
    .recharge-type::-webkit-scrollbar
        display: none
    .typu-line
        font-size : $fonts-14
        padding : .625rem 1rem
        background : $color-f0
    .type-padd
        padding : .625rem 1rem
        line-height : 2rem
    .icon-type
        width : 2rem
        height : 2rem
        margin-right : .75rem
        background-size : 100% 100%
    .icon-check
        width : .75rem
        height : .75rem
        background-size: 100% 100%
    .check
        background-image: url('../../common/image/cqk_cz_check.png')
    .uncheck
        background-image: url('../../common/image/cqk_cz_uncheck.png')
    .recharge-box
        position : fixed
        left : 0
        bottom : 0
        width : 100%
        height : 4.5rem
        background : white
        z-index : 999
    .white-space
        width : 100%
        height : .25rem
        background : $color-f0
    .recharge-btn
        width : 90%
        line-height : 2.5rem
        text-align : center
        color : white
        background : $color-r
        border-radius : 1.5rem 1.5rem
        margin-top : .75rem
</style>